<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>输入框选择POI点</title>
  <style>
    html, body, #container {
      width: 100%;
      height: 100%;
      margin: 0px;
      font-size: 13px;
    }

    #pickerBox {
      position: absolute;
      z-index: 9999;
      top: 50px;
      right: 30px;
      width: 300px;
    }

    #pickerInput {
      width: 200px;
      padding: 5px;
    }

    #poiInfo {
      background: #fff;
    }

    .amap_lib_placeSearch .poibox.highlight {
      background-color: #CAE1FF;
    }

    .amap_lib_placeSearch .poi-more {
      display: none!important;
    }
  </style>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "84ec24274e0fb47a345a8ce979ef4cfb",
    };
  </script>
  <script type="text/javascript" src='https://webapi.amap.com/maps?v=2.0&key=1869d3c6fca1a95eb881fe32c3b3a8b2'></script>
  <!-- UI组件库 1.1 -->
  <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
</head>
<body>
<div id="container" class="map" tabindex="0"></div>
<div id="pickerBox">
  <input id="pickerInput" placeholder="输入关键字选取地点" />
  <div id="poiInfo"></div>
</div>

<script type="text/javascript">
  // 初始化地图
  var map = new AMap.Map('container', {
    zoom: 10
  });

  // 加载PoiPicker UI组件
  AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
    // 初始化PoiPicker
    var poiPicker = new PoiPicker({
      input: 'pickerInput' // 关联输入框
    });

    // PoiPicker事件监听
    poiPicker.on('poiPicked', function(poiResult) {
      var poi = poiResult.item;
      // 此处可以进行后续操作，例如将标记点添加到地图上
      map.setCenter(poi.location);
    });

    // 建议搜索
    poiPicker.onCityReady(function() {
      poiPicker.suggest('美食');
    });
  });
</script>
</body>
</html>